<template>
	<div class="body">
		<!-- 		<div class="tab">
			<div :class="{'active':active}" @click="actives(false)">用户素材</div>
			<div :class="{'active':!active}" @click="actives(true)"
				v-if="userInform.level != null&&userInform.level.allowInvite === true">团队素材</div>
		</div> -->
		<!-- 用户 -->
		<div v-if="active">
			<view class="content">
				<!-- dataInfo：滚动卡片数据  swiperIndex：滚动序列 @change：滚动事件-->
				<cc-scroolCard v-if="data" :dataInfo="data" :swiperIndex="swiperIndex"
					@change="swiperChangeClick"></cc-scroolCard>
			</view>
			<div class="null" v-if="show" @click="select(false)">
				<image src="../../static/null.png" mode="widthFix"></image>
				<div class="text">暂无海报快去生成吧</div>
			</div>

			<view>
				<div class="gc">
					<a class="abt" @click="fodder(false)">管理我的海报</a>
					<a class="abt" @click="select(false)">海报广场</a>
				</div>
				<div class="wxtp">
					<image src="../../static/poster/微信@3x.png" mode="scaleToFill"></image>
				</div>
				<div style="color: #ccc; font-size: 14px; width: 100% ;text-align: center; position: fixed; bottom:12%;"> 长按图片分享给好友</div>


				<!-- 				<div v-if="!show" style="text-align: center; color: gray; font-size: 1.5em; margin-top: 30px;"> 长按海报 ,
					并分享给好友</div> -->

			</view>

		</div>
	</div>
</template>

<script>
	import Api from "../../API/api";
	import wx from "jweixin-module";
	export default {
		data() {
			return {
				show: true,
				active: true,
				swiperIndex: 0,
				userInform: {},
				data: {
					headImgs: []
				},
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#3c3e49',
					iconColor: '#fff',
					icon: 'back'
				}
			}
		},
		onShow() {
			this.userInform = uni.getStorageSync("userInform")
			console.log(uni.getStorageSync("type"))
			this.selects()
			Api.getwxuser().then(res => {
				this.userInform = res.data;
				uni.setStorageSync("userInform", res.data)
			})
		},
		methods: {
			//查看不同的数据
			selects() {
				const this_ = this;
				Api.getQr({
					type: false
				}).then(x => {
					this_.data.headImgs = x.data;
					console.log(x.data);
					if (this_.data.headImgs.length > 0) {
						this_.show = false
						console.log(this_.show);
					} else {
						this_.show = true
					}
				})
				console.log(uni.getStorageSync("userInform"))
				this.userInform = uni.getStorageSync("userInform")
			},

			swiperChangeClick(e) {
				this.swiperIndex = e.detail.current
				console.log("swiperIndex = " + this.swiperIndex);
			},
			fodder(type) {
				if (type === false) {
					uni.navigateTo({
						url: '/pages/index/user/user_fodder'
					})
				} else {
					uni.navigateTo({
						url: '/pages/index/fodder'
					})
				}
			},
			//海报广场
			select(type) {
				if (type === false) {
					uni.navigateTo({
						url: '/pages/index/user/user_select'
					})
				} else {
					uni.navigateTo({
						url: '/pages/index/select'
					})
				}
			},
			//调转调用
			actives(type) {
				this.data.headImgs = null
				this.selects()
				if (type === true) {
					uni.setStorageSync("type", true)
					console.log("团队")
					// 团队active=true
					this.active = false
					return false
				} else {
					uni.setStorageSync("type", false)
					//用户active=false
					console.log("用户")
					this.active = true
					return true
				}

			},

			//朋友圈 //TODO:未实现
			circleOfFriends() {
				Api.getWechatConfig().then(res => {
					wx.config({
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: res.data.appId, // 必填，公众号的唯一标识
						timestamp: res.data.timestamp, // 必填，生成签名的时间戳
						nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
						signature: res.data.signature, // 必填，签名
						jsApiList: ['updateAppMessageShareData',
							'updateTimelineShareData'
						] // 必填，需要使用的JS接口列表
						// jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表
					});
					wx.ready(function() { //需在用户可能点击分享按钮前就先调用
						// 分享朋友
						wx.updateAppMessageShareData({
							title: "分享标题", // 分享标题
							desc: "desc", // 分享描述
							link: res.data.url, // 分享链接
							imgUrl: "", // 分享图标
							success: function() {
								// 用户确认分享后执行的回调函数
								console.log('分享朋友 success')
							}
						});
						// 分享朋友圈
						wx.updateTimelineShareData({
							title: "分享标题",
							link: res.data.url, // 分享链接
							imgUrl: "", // 分享图标
							success: function() {
								// 用户确认分享后执行的回调函数
								console.log('分享朋友圈 success')
							}
						});
					})
				});

			}
		}
	}
</script>

<style lang="less" scoped>
	.tab {
		width: 100%;
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		position: sticky;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;

		div {
			margin: 0 30rpx;
			font-size: 32rpx;
			font-family: PingFang-SC-Regular, PingFang-SC;
			font-weight: 600;
			color: #bbb;
		}

		.active {
			font-weight: 700;
			color: #070E2F;

			&::after {
				margin: auto;
				display: block;
				content: "";
				width: 40rpx;
				height: 8rpx;
				background: #FFBE00;
				border-radius: 4rpx;
				transform: translateY(25rpx);
			}
		}
	}

	page {

		background: #f5f6fa;

	}

	.null {
		position: fixed;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);

		image {
			width: 200rpx;
		}

		.text {
			margin-top: 20rpx;
			color: #aaa;
			font-size: 26rpx;
		}
	}

	.wxtp {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 15%;

		image {
			width: 110rpx;
			height: 110rpx;
			// 
		}

	}

	.gc {
		padding-top: 30px;
		text-align: center;
		font-size: 30rpx;

		color: #ccc;

		.abt {
			text-decoration: underline;
			/* 添加下划线 */
			margin: 20px
		}
	}

	.content {
		display: flex;
		padding-top: 10rpx;

	}

	.mytent {
		text-align: center;
		margin-top: 20px;
		font-size: 14;
	}

	.bottom {
		background-color: #fff;
		display: flex;
		justify-content: space-around;
		width: 100%;
		text-align: center;
		padding: 50rpx 30rpx 100rpx 30rpx;
		border-radius: 20rpx 20rpx 0 0;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;

		img {
			height: 40px;
		}
	}
</style>